<template>
   <div style="display: flex;">
            <div style="margin-right: 40px;">
                学生姓名：
                <el-input v-model="searchProps.stuName" size="big" style="width: 150px;"
                    placeholder="搜索学生信息"></el-input>
            </div>
            <div style="margin-right: 40px;">
                市场部：
                <el-select v-model="searchProps.origin" placeholder="Select" size="big" style="width: 150px">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <div style="margin-right: 40px;">
                学院：
                <el-select v-model="searchProps.collegeId" placeholder="Select" size="big" style="width: 150px">
                    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <div style="margin-right: 40px;">
                工作城市：
                <el-cascader v-model="searchProps.workCity" :options="zhuanOk" :props="props" @change="handleChange" />
            </div>
            <el-button id="but" @click="searchHandel()">查询</el-button>
        </div>
</template>

<script setup lang="ts">
import {defineProps,defineEmits} from 'vue'
import CityData from '@/assets/json/CityData.json'
const props=defineProps({
    searchProps:{
        type:Object,
        default:()=>{}
    }
})
const options1 = [
    {
        value: 0,
        label: '请选择'
    },
    {
        value: 1,
        label: '游戏学院'
    },
    {
        value: 2,
        label: '网站工程学院'
    }
]

const options = [
    {
        value: 0,
        label: '请选择',
    },
    {
        value: '晋中市场部',
        label: '晋中市场部',
    },
    {
        value: '招生办',
        label: '招生办',
    },
    {
        value: '辽宁市场部',
        label: '辽宁市场部',
    },
    {
        value: '冀北市场部',
        label: '冀北市场部',
    },
    {
        value: '晋南市场部',
        label: '晋南市场部',
    },
    {
        value: '豫中市场部',
        label: '豫中市场部',
    },
]

// const props=defineProps({
//     searchProps:Object,
//     options:Object,
//     options1:Object,
//     props:{
//         label: String,
//         value: String
//     }
// })
const zhuanValue = (data) => {
    return data.map(item => {
        const { code, children, ...rest } = item //剩余参数（Rest Parameters）或剩余属性（Rest Properties）
        return {
            ...rest,
            value: code,
            children: children ? zhuanValue(children) : []
        }
    })
}
const zhuanOk = zhuanValue(CityData)
const emit =defineEmits(['searchHandel','handleChange'])
const handleChange=()=>{
    emit('handleChange',props.searchProps.workCity)
}
const searchHandel=()=>{
    emit('searchHandel')
}



</script>

<style scoped>

</style>

